<template>
    <div>
        <el-button type="primary">添加分类</el-button>
        <Tables :cols='cols' :data="this.data" :tp="{children: 'children', hasChildren: 'hasChildren'}">
            <template v-slot:deleted='{row}'>
              <i class="el-icon-success" ></i>
            </template>
            <template v-slot:level='{row}'>
                <el-tag v-if="row.cat_level==0">一级</el-tag>
                <el-tag type="success" v-if="row.cat_level==1">二级</el-tag>
                <el-tag type="warning" v-if="row.cat_level==2">三级</el-tag>
            </template>
            <template v-slot:action='{row}'>
              <el-button type="primary">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </template>
        </Tables>
    </div>
</template>

<script>
import Tables from "../../components/table.vue";
import { categoriesList } from "../../api/categories.js";
export default {
  components: { Tables },
  data() {
    return {
      pagenum: 1,
      pagesize: 10,
      total: 0,
      data: [],
      cols: [
        {
          label: "#",
          type: "index"
        },
        {
          label: "分类名称",
          name: "cat_name"
        },
        {
          label: "是否有效",
          slot: "deleted"
        },
        {
          label: "排序",
          name: "cat_level",
          slot: "level"
        },
        {
          label: "操作",
          align: "center",
          width: 180,
          slot: "action"
        }
      ]
    };
  },
  mounted() {
    this.getcategoriesList();
  },
  methods: {
    async getcategoriesList() {
      let res = await categoriesList({
        type: 3,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.data = res.data.data.result;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-icon-success {
  color: rgb(0, 255, 13);
}
</style>